import React from 'react'
import type { FormProps } from 'antd';
import { Button, Checkbox, Form, Input } from 'antd';
// 调接口
import { getLogin } from '../../api/index'
// 引用类型
import './index.scss'
// 引用JSON文件
// import RoleJSON from '../../data/role.json'
// import RouterJSON from '../../data/router.json'
// import UserJSON from '../../data/user.json'
// console.log(RoleJSON);
// console.log(RouterJSON);
// console.log(UserJSON);



//类型
type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
};
function index() {
  const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
    // console.log('Success:', values);
    console.log('登录提交',values);
    let res = await getLogin(values)
    console.log('成功', res.data.data);
    if (res.data.code === 200) {
      localStorage.setItem('token',res.data.data.token)
      localStorage.setItem('img',res.data.data.image)
      localStorage.setItem('user',res.data.data.user_id)
      localStorage.setItem('name',res.data.data.name)
      // localStorage.setItem('auth',JSON.stringify(RouterJSON)as string)
      window.location.href = '/home'
      alert('登陆成功')
    } else {
      alert('登录失败')
    }
  };

  const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div className='LoginBox'>
      <div className="left">
        <div className='imgBox'></div>
        <div className="picBox"></div>
      </div>
      <div className="FormBox">
        <div className="div">
          <div className="FTop">

          </div>
          <span>欢迎登录</span>
        </div>

        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item<FieldType>
            label="用户名"
            name="username"
            rules={[{ required: true, message: '请输入用户名!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入密码!' }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item<FieldType>
           
            wrapperCol={{ offset: 8, span: 16 }}
          >
            <Checkbox>记住密码</Checkbox>
          </Form.Item>


          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              重置
            </Button>
            <Button type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>

    </div>
  )
}

export default index
